<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<button class="btn1">执行高强度计算</button>
<button class="btn2">执行其他任务</button>
<h1 class="show"></h1>

<script>
// Web Worker
// JS在浏览器中只有JS引擎线程解析和执行（单线程）
// 如果JS执行高强度运算，不能及时响应用户的操作，会给用户一种假死的体验
// Web Worker是 HTML5中新增的一种 '多线程技术'
// 通过Web Worker可以在浏览器开辟另一个线程来执行JS脚本
// 可以将 高强度计算或高耗时任务 交给worker线程来计算
// 保留主线程的运算能力，用于响应用户的操作，及时渲染更新页面
// 注意：
// 1.web worker需要在服务器环境运行（使用 Live Server 插件打开页面）
// 2.worker线程不能执行跨域脚本
// 3.worker线程不能操作window对象、document对象
// 4.但是，可以使用ajax、navigator、location 对象

let btn1 = document.querySelector('.btn1');
let btn2 = document.querySelector('.btn2');
let show = document.querySelector('.show');

// 创建worker对象（开辟worker线程）
// './worker.js' 是worker线程要执行的脚本
let worker = new Worker('./worker.js');

// 需求：主线程发送命令让worker线程执行一个高强度计算，计算完成后返回计算结果给主线程展示在页面中

// 主线程和worker线程之间如何通信？

btn1.onclick = function (){
    // console.log( '执行高强度计算。。。' );
    // let sum = 0;
    // for (var i = 0; i < 3000000000; i++) {
    //     sum += i;
    // }
    // show.innerText = sum;

    // 给worker线程发送消息
    console.log( '给worker线程发送消息。。。' );
    worker.postMessage('开始干活');
}

worker.onmessage = function (e){
    // worker线程发送消息过来时，触发message事件
    console.log( 'worker线程来消息了。。。' );
    // console.log( e.data );// worker线程发送过来的消息
    show.innerText = e.data;

    // 关闭worker线程
    worker.terminate();
}

btn2.onclick = function (){
    console.log( '执行其他任务。。。' );
}

</script>
</body>
</html>